<!-- mb-4 for spacing between the navbar and main content -->
<nav class="navbar bg-charcoal-surface1 py-3 mb-4" id="main-navbar">
  <div class="container">
    <div class="d-flex">
      <!-- Offcanvas menu for navigation items -->
      <input type="checkbox" class="d-none" id="noscript-navbar-toggler" />
      <label for="noscript-navbar-toggler" class="navbar-toggler border-0 p-0 me-3 " role="button" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </label>
      <input type="checkbox" class="d-none" id="noscript-navbar-close-button" />
      <label for="noscript-navbar-close-button" class="navbar-toggler border-0 p-0 position-fixed top-0 start-0 bg-charcoal-surface1 z-5" role="button" aria-label="Toggle navigation">
        <div class="btn-close text-reset p-4" aria-label="Close"></div>
      </label>

  <div class="offcanvas border-0 bg-charcoal-surface1 position-fixed z-5 vh-100 visible" tabindex="-1" id="noscriptOffcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
      <!-- Offcanvas header -->
    <div class="offcanvas-header d-flex align-items-start">
      <div class="d-flex flex-column w-75">
        <h2 class="display-6 offcanvas-title mb-0" id="offcanvasNavbarLabel"><a class="text-body text-decoration-none" href="/">PixivFE</a></h2>
        <span class="text-body-secondary mb-0">An open-source alternative frontend for Pixiv that doesn't suck.</span>
      </div>
    </div>
    <!-- Offcanvas body -->
    <div class="offcanvas-body">
      <ul class="navbar-nav me-auto">
        <div class="mb-4">
          <h3>Explore</h3>
          <li class="nav-item">
            <a class="nav-link" href="/discovery"><i class="bi bi-compass me-2" title="compass"></i>Discovery</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/ranking"><i class="bi bi-bar-chart-line me-2" title="crown"></i>Ranking</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/rankingCalendar"><i class="bi bi-calendar me-2" title="calendar"></i>Ranking calendar</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/newest"><i class="bi bi-stars me-2" title="sparkling"></i>Newest</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/pixivision"><i class="bi bi-palette me-2"></i>pixivision</a>
          </li>
        </div>
        <div class="mb-4">
          <h3>Your profile</h3>
          <li class="nav-item">
            <a class="nav-link" href="/self/followingWorks"><i class="bi bi-people me-2" title="users"></i>Latest works by followed</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/self/bookmarks"><i class="bi bi-heart me-2" title="heart"></i>Your bookmarks</a>
          </li>
        </div>
        <div class="mb-4">
          <h3>Settings & info</h3>
          <li class="nav-item">
            <a class="nav-link" href="/settings"><i class="bi bi-gear me-2" title="settings"></i>Settings</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/about"><i class="bi bi-info-circle me-2" title="about"></i>About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://codeberg.org/vnpower/pixivfe"><i class="bi bi-globe me-2" title="globe"></i>Source code</a>
          </li>
        </div>
      </ul>
    </div>
  </div>
      <!-- Icon and title -->
      <a href="/">
        <img src="/img/favicon.svg" alt="PixivFE icon" width="30" height="30" class="d-inline-block me-2" />
      </a>
      <span class="h2 m-0">
        <a class="text-body text-decoration-none mb-0" href="/">PixivFE</a>
      </span>
    </div>
    <!-- Search bar (visible on md and larger devices) -->
    <div class="position-absolute top-50 start-50 translate-middle d-none d-md-block">
      <form class="d-flex" action="/tags" method="post" autocomplete="off">
        <input class="form-control bg-charcoal-surface2 rounded-pill border-0" type="search" name="name" required placeholder="🔍 Search artworks" aria-label="Search" />
      </form>
    </div>
    <!-- Search icon (visible on smaller devices) -->
    <div class="d-md-none ms-auto">
      <button class="btn btn-link text-body p-0 me-1" type="button">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
          <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0" />
        </svg>
      </button>
    </div>
    <!-- TODO: figure out how to have the logged in user's avatar and name in the navbar -->
    <!-- <a class="h5 text-decoration-none mb-0 d-flex align-items-center" href="/">
        <img src=" .User.Avatar " width="30" height="30" class="d-inline-block rounded-circle object-fit-cover me-2">
        <p class="m-0"> .User.Name </p>
      </a> -->
  </div>

  <!-- Offcanvas navigation -->
  <!-- NOTE: located under the nav element otherwise some of the default styling doesn't apply (e.g. hover state for nav-link) -->
</nav>
